import React from 'react';
import './newUser.css'

export default function newUser() {
  return (
    <div className='newUser'>
        <h1 className='newUserTitle'>New Account</h1>
        <form action="" className='newUserForm'>
            <div className="newUserItem">
                <label htmlFor="">Username</label>
                <input type="text" placeholder='John' />
            </div>
            <div className="newUserItem">
                <label htmlFor="">Full Name</label>
                <input type="text" placeholder='John Smith' />
            </div>
            <div className="newUserItem">
                <label htmlFor="">Email</label>
                <input type="text" placeholder='John@123.com' />
            </div>
            <div className="newUserItem">
                <label htmlFor="">Password</label>
                <input type="text" placeholder='password' />
            </div>
            <div className="newUserItem">
                <label htmlFor="">Phone</label>
                <input type="text" placeholder='+ 1 123 456 89' />
            </div>
            <div className="newUserItem">
                <label htmlFor="">Address</label>
                <input type="text" placeholder='NewYork | USA' />
            </div>
            <div className="newUserItem">
                <label>Gender</label>
                <div className="newUserGender">
                    <input type="radio" name='gender' id='male' value="male" />
                    <label htmlFor="Male">Male</label>
                    <input type="radio" name='gender' id='female' value="female" />
                    <label htmlFor="Female">Female</label>
                    <input type="radio" name='gender' id='other' value="other" />
                    <label htmlFor="Other">Other</label>
                </div>
            </div>
            <div className="newUserItem">
                <label htmlFor="Active">Active</label>
                <select name="active" id="active" className="newUserSelect">
                    <option value="yes">Yes</option>
                    <option value="no">No</option>
                </select>
            </div>
        </form>
        <button className="newUserButton">Create</button>
    </div>
  )
}
